@import "../../../assets/style/flex";
@import "../../../assets/style/base";

.dj{
  width: 100%;
  padding-top: 45px;
  .content {
    height: 506px;
    background: #191A1E;
    border-radius: 20px;
    margin-left: 45px;
    margin-right: 45px;
    .flexV();

    .dj_light_title{
      font-size: 28px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #666666;
      margin-left: 153px;
      margin-top: 27px;
    }

    .dj_color_title{
      font-size: 24px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #999999;
      margin-left: 32px;
      margin-top: 44px;
    }

    .light_list {
      margin-top: 37px;
      .flexH();
      .flex-cCenter();

      .line {
        width: 2px;
        height: 46px;
        background-color: #101113;
        margin-left: 35px;
        margin-right: 35px;
      }
    }

    .dj_sound_title{
      font-size: 24px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #999999;
      margin-left: 32px;
      margin-top: 20px;
    }
    .dj_sound_progress_view{
      margin-left: 32px;
      margin-right: 32px;
      margin-top: 21px;
      margin-bottom: 29px;
      .flexH();
      .flex-cCenter();

      .line {
        width: 2px;
        height: 46px;
        background-color: #101113;
        margin-left: 35px;
        margin-right: 35px;
      }

      .dj_sound_progress_item{
        width: 108px;
        height: 44px;
        background: linear-gradient(90deg, rgba(34, 35, 41, 1), rgba(47, 47, 52, 1));
        box-shadow: -5px -9px 10px 0px rgba(120, 120, 120, 0.42);
        border-radius: 22px;

        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #64687B;
        line-height: 44px;
        text-align: center;

        &.chose{
          background: linear-gradient(269deg, #EEB92C, #EDB728);
          box-shadow: -5px -9px 10px 0px rgba(120, 120, 120, 0.42);
        }
      }

      //.dj_sound_progress_item_chose{
      //  width: 108px;
      //  height: 44px;
      //  background: linear-gradient(269deg, #EEB92C, #EDB728);
      //  border-radius: 22px;
      //
      //  font-size: 18px;
      //  font-family: Alibaba PuHuiTi;
      //  font-weight: 400;
      //  color: #64687B;
      //  line-height: 44px;
      //  text-align: center;
      //}
    }

    .dj_sound_switch{
      margin-left: 32px;
      margin-top: 21px;
    }
  }

  .dj_tip{
    width: 87px;
    height: 87px;
    position:relative;
    top:-530px;
    left: 70px;
  }
}
